<template>
  <transition name="move" @after-leave="afterLeave">
    <div class="food" v-show="visible">
      <cube-scroll ref="scroll">
        <div class="food-content">
          <div class="image-header">
            <div class="img" :style="bgImage"></div>
            <div class="back" @click="hide">
              <i class="icon-arrow_lift"></i>
            </div>
            <div class="bgcolor"></div>
          </div>

          <div class="content">
            <div class="title">{{ food.name }}</div>
            <div class="detail">
              <span class="selle-count">月售{{ food.sellCount }}</span>
              <span class="rating">好评率{{ food.rating }}%</span>
            </div>
            <div class="price">
              <span class="now">
                <span class="smallFont">￥</span>
                {{ food.price }}
              </span>
              <span class="old" v-show="food.oldPrice">
                <span class="smallFont">￥</span>
                {{ food.oldPrice }}
              </span>
            </div>
            <div class="cart-control-wrapper">
              <cart-control v-on="$listeners" :food="food"></cart-control>
            </div>
            <transition name="fade">
              <div @click="addFirst" class="buy" v-show="!food.count">
                加入购物车
              </div>
            </transition>
          </div>

          <split v-show="food.info"></split>
          <div class="info" v-show="food.info">
            <h1 class="title">商品信息</h1>
            <p class="text">{{ food.info }}</p>
          </div>

          <split></split>
          <div class="ratings">
            <h1 class="title">商品评价</h1>
            <ratings-select
              @select="onSelect"
              @toggle="onToggle"
              :selectType="selectType"
              :onlyContent="onlyContent"
              :desc="desc"
              :ratings="ratings"
            ></ratings-select>
          </div>

          <div class="ratings-wrapper">
            <ul v-show="computedRatings && computedRatings.length">
              <li
                class="rating-item border-1px"
                v-for="(rating, index) of computedRatings"
                :key="index"
              >
                <div class="user">
                  <span class="name">{{ rating.username }}</span>
                  <img
                    class="avatar"
                    width="12"
                    height="12"
                    :src="rating.avatar"
                  />
                </div>
                <div class="time">{{ format(rating.rateTime) }}</div>
                <p class="text">
                  <span :class="selectIcon(rating.rateType)"></span>
                  {{ rating.text }}
                </p>
              </li>
            </ul>
            <div
              class="no-ratings"
              v-show="!computedRatings || !computedRatings.length"
            >
              暂无评价
            </div>
          </div>
        </div>
      </cube-scroll>
    </div>
  </transition>
</template>

<script>
import moment from 'moment'
import popupMixin from 'assets/mixins/popup.js'
import ratingMixin from 'assets/mixins/rating.js'
import cartControl from './cartControl'
import ratingsSelect from 'common/ratings-select/ratings-select'
import split from 'common/split/split'

const EVENT_LEAVE = 'leave'
const EVENT_ADD = 'add'
const EVENT_SHOW = 'show'

export default {
  name: 'food',
  mixins: [popupMixin, ratingMixin],
  props: {
    food: {
      type: Object
    }
  },
  data() {
    return {
      desc: {
        all: '全部',
        positive: '推荐',
        negative: '吐槽'
      }
    }
  },
  computed: {
    bgImage() {
      return {
        backgroundImage: `url(${this.food.image})`
      }
    },
    ratings() {
      if (!this.food.ratings) {
        return []
      }
      return this.food.ratings
    }
  },
  created() {
    this.$on(EVENT_SHOW, () => {
      this.$nextTick(() => {
        this.$refs.scroll.refresh()
      })
    })
  },
  updated() {
    this.$nextTick(() => {
      this.$refs.scroll.refresh()
    })
  },
  methods: {
    afterLeave() {
      this.$emit(EVENT_LEAVE)
    },
    format(time) {
      return moment(time).format('YYYY-MM-DD hh:mm')
    },
    addFirst(event) {
      this.$set(this.food, 'count', 1)
      this.$emit(EVENT_ADD, event.target)
    },
    selectIcon(rateType) {
      if (rateType === 0) {
        return 'icon-thumb_up'
      } else {
        return 'icon-thumb_down'
      }
    }
  },
  components: {
    cartControl,
    split,
    ratingsSelect
  }
}
</script>
<style lang="stylus" scope>
@import '~styles/mixin.stylus';
@import '~styles/base.stylus';

.food {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 48px;
  width: 100%;
  z-index: 30;
  background: #fff;

  &.move-enter-active, &.move-leave-active {
    transition: all 0.3s ease;
  }

  &.move-enter, &.move-leave-to {
    transform: translate3d(100%, 0, 0);
  }

  .food-content {
    .image-header {
      position: relative;
      height: 0;
      width: 100%;
      padding-bottom: 100%;

      .img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
      }

      .bgcolor {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 30%;
        z-index: 1;
        opacity: 0.4;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
      }

      .back {
        z-index: 2;
        position: absolute;
        top: 10px;
        left: 0;

        .icon-arrow_lift {
          display: block;
          padding: 10px;
          font-size: 20px;
          font-weight: 500;
          color: #fff;
        }
      }
    }
  }

  .content {
    position: relative;
    padding: 18px;

    .title {
      font-size: 14px;
      font-weight: 600;
      color: rgb(7, 17, 27);
      line-height: 14px;
      margin-bottom: 8px;
    }

    .detail {
      font-size: 0;
      color: rgb(147, 153, 159);
      line-height: 20px;
      margin-bottom: 18px;

      .selle-count {
        font-size: 10px;
        margin-right: 12px;
      }

      .rating {
        font-size: 10px;
      }
    }

    .price {
      line-height: 24px;
      font-size: 0;

      // margin-right: 18px;
      .smallFont {
        font-size: 10px;
        font-weight: normal;
        color: rgb(240, 20, 20);
        vertical-align: bottom;
      }

      .now {
        font-size: 14px;
        font-weight: 700;
        color: rgb(240, 20, 20);
        margin-right: 10px;
      }

      .old {
        font-size: 10px;
        font-weight: 700;
        color: rgb(147, 153, 159);
        vertical-align: middle;
        text-decoration: line-through;

        .smallFont {
          color: rgb(147, 153, 159);
        }
      }
    }

    .cart-control-wrapper {
      position: absolute;
      right: 18px;
      bottom: 11.5px;
    }

    .buy {
      position: absolute;
      right: 18px;
      bottom: 18px;
      width: 74px;
      text-align: center;
      font-size: 10px;
      line-height: 24px;
      color: #fff;
      background: rgb(0, 160, 220);
      border-radius: 14px;

      &.fade-enter-active, &.fade-leave-active {
        transition: all 0.3s ease;
      }

      &.fade-enter, &.fade-leave-to {
        opacity: 0;
      }
    }
  }

  .info {
    padding: 18px;

    .title {
      font-size: 14px;
      font-weight: 400;
      color: rgb(7, 17, 27);
      line-height: 14px;
      margin-bottom: 6px;
    }

    .text {
      padding: 0 8px;
      font-size: 12px;
      font-weight: 200;
      color: rgb(77, 85, 93);
      line-height: 24px;
    }
  }

  .ratings {
    padding: 18px 18px 0;
    border-bottom: 1px solid rgba(7, 17, 27, 0.1);

    .title {
      font-size: 14px;
      font-weight: 400;
      color: rgb(7, 17, 27);
      line-height: 14px;
    }
  }

  .ratings-wrapper {
    margin: 0 18px;

    .rating-item {
      position: relative;
      padding: 16px 0;
      border-1px(rgba(7, 17, 27, 0.1));

      &:last-child {
        border-none();
      }

      .user {
        position: absolute;
        right: 0;

        .name {
          font-size: 10px;
          color: rgb(147, 153, 159);
          line-height: 12px;
          margin-right: 6px;
        }

        .avatar {
          width: 12px;
          height: 12px;
          border-radius: 50%;
          vertical-align: middle;
        }
      }

      .time {
        font-size: 10px;
        color: rgb(147, 153, 159);
        line-height: 12px;
        margin-bottom: 6px;
      }

      .text {
        font-size: 12px;
        color: rgb(7, 17, 27);
        line-height: 16px;

        .icon-thumb_up, .icon-thumb_down {
          font-size: 12px;
          color: rgb(0, 160, 220);
          line-height: 24px;
          vertical-align: bottom;
          margin-right: 4px;
        }

        .icon-thumb_down {
          color: rgb(147, 153, 159);
        }
      }
    }

    .no-ratings {
      padding: 16px 0;
      font-size: 12px;
      color: rgb(7, 17, 27);
    }
  }
}
</style>
